热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Bootstrap<基础五>表格

原文:Bootstrap表格Bootstrap提供了一个清晰的创建表格的布局。下表列出了Bootstrap支持的一些表格元素:标签描述为表格添加基础样式。表格标题行的容器元素(),

原文:Bootstrap <基础五>表格



Bootstrap 提供了一个清晰的创建表格的布局。下表列出了 Bootstrap 支持的一些表格元素:





标签描述





),用来标识表格列。



)。









内使用。





为表格添加基础样式。
表格标题行的容器元素(
表格主体中的表格行的容器元素(
一组出现在单行上的表格单元格的容器元素()。
默认的表格单元格。

特殊的表格单元格,用来标识列或行(取决于范围和位置)。必须在

关于表格存储内容的描述或总结。


表格类

下表样式可用于表格中:






, 内的行上看到条纹,如下面的实例所示:










描述 
.table为任意 添加基本样式 (只有横向分隔线)




内添加斑马线形式的条纹 ( IE8 不支持)









内的任一行启用鼠标悬停状态












 
.table-striped
 
.table-bordered为所有表格的单元格添加边框 
.table-hover
 
.table-condensed让表格更加紧凑 
联合使用所有表格类 

下表的类可用于表格的行或者单元格:






























描述 
.active将悬停的颜色应用在行或者单元格上 
.success表示成功的操作 
.info表示信息变化的操作 
.warning表示一个警告的操作 
.danger表示一个危险的操作 

基本的表格

如果您想要一个只带有内边距(padding)和水平分割的基本表,请添加 class .table,如下面实例所示:




























基本的表格布局
名称 城市
Tanmay Bangalore
Sachin Mumbai



结果如下所示:

技术分享

可选的表格类

除了基本的表格标记和 .table class,还有一些可以用来为标记定义样式的类。下面将向您介绍这些类。

条纹表格

通过添加 .table-striped class,您将在



























条纹表格布局
名称 城市 密码
Tanmay Bangalore 560001
Sachin Mumbai 400003
Uma Pune 411027



结果如下所示:

技术分享

边框表格

通过添加 .table-bordered class,您将看到每个元素周围都有边框,且占整个表格是圆角的,如下面的实例所示:




































边框表格布局
名称 城市 密码
Tanmay Bangalore 560001
Sachin Mumbai 400003
Uma Pune 411027



结果如下所示:

技术分享

悬停表格

通过添加 .table-hover class,当指针悬停在行上时会出现浅灰色背景,如下面的实例所示:




































悬停表格布局
名称 城市 密码
Tanmay Bangalore 560001
Sachin Mumbai 400003
Uma Pune 411027



结果如下所示:

技术分享

精简表格

通过添加 .table-condensed class,行内边距(padding)被切为两半,以便让表看起来更紧凑,如下面的实例所示。这在想让信息看起来更紧凑时非常有用。




































精简表格布局
名称 城市 密码
Tanmay Bangalore 560001
Sachin Mumbai 400003
Uma Pune 411027



结果如下所示:

技术分享

上下文类

下表中所列出的上下文类允许您改变表格行或单个单元格的背景颜色。







































描述
.active对某一特定的行或单元格应用悬停颜色
.success表示一个成功的或积极的动作
.warning表示一个需要注意的警告
.danger表示一个危险的或潜在的负面动作

这些类可被应用到









































上下文表格布局
产品 付款日期 状态
产品1 23/11/2013 待发货
产品2 10/11/2013 发货中
产品3 20/10/2013 待确认
产品4 20/10/2013 已退货



结果如下所示:

技术分享

响应式表格

通过把任意的 .table 包在 .table-responsive class 内,您可以让表格水平滚动以适应小型设备(小于 768px)。当在大于 768px 宽的大型设备上查看时,您将看不到任何的差别。










































响应式表格布局
产品 付款日期 状态
产品1 23/11/2013 待发货
产品2 10/11/2013 发货中
产品3 20/10/2013 待确认
产品4 20/10/2013 已退货




结果如下所示:

技术分享






 




系列文章:

Bootstrap <基础一> css 概览

Bootstrap<基础二>网络系统

Bootstrap<基础三>排版

Bootstrap<基础四> 代码

Bootstrap <基础五>表格

Bootstrap<基础六> 表单

Bootstrap <基础七>按钮

Bootstrap <基础八>图片

Bootstrap<基础九>辅助类

Bootstrap<基础十> 响应式实用工具

Bootstrap<基础十一>字体图标(Glyphicons)

Bootstrap <基础十二>下拉菜单(Dropdowns)

Bootstrap<基础十三> 按钮组

Bootstrap<基础十四> 按钮下拉菜单

Bootstrap<基础十五> 输入框组

Bootstrap<基础十六> 导航元素


Bootstrap<基础十七>导航栏

Bootstrap <基础十八>面包屑导航(Breadcrumbs)

Bootstrap <基础十九>分页



Bootstrap<基础二十> 标签


Bootstrap <基础二十一>徽章(Badges)

Bootstrap <基础二十二>超大屏幕(Jumbotron)

Bootstrap <基础二十三>页面标题(Page Header)

Bootstrap<基础二十四> 缩略图

Bootstrap <基础二十五>警告(Alerts)

Bootstrap <基础二十六>进度条


 


推荐阅读
  • 自定义滚动条美化页面内容
    当页面内容超出显示范围时,为了提升用户体验和页面美观,通常会添加滚动条。如果默认的浏览器滚动条无法满足设计需求,我们可以自定义一个符合要求的滚动条。本文将详细介绍自定义滚动条的实现过程。 ... [详细]
  • 微软推出Windows Terminal Preview v0.10
    微软近期发布了Windows Terminal Preview v0.10,用户可以在微软商店或GitHub上获取这一更新。该版本在2月份发布的v0.9基础上,新增了鼠标输入和复制Pane等功能。 ... [详细]
  • 解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ... [详细]
  • 第二十五天接口、多态
    1.java是面向对象的语言。设计模式:接口接口类是从java里衍生出来的,不是python原生支持的主要用于继承里多继承抽象类是python原生支持的主要用于继承里的单继承但是接 ... [详细]
  • 解决Parallels Desktop错误15265的方法
    本文详细介绍了在使用Parallels Desktop时遇到错误15265的多种解决方案,包括检查网络连接、关闭代理服务器和修改主机文件等步骤。 ... [详细]
  • 解决 Windows Server 2016 网络连接问题
    本文详细介绍了如何解决 Windows Server 2016 在使用无线网络 (WLAN) 和有线网络 (以太网) 时遇到的连接问题。包括添加必要的功能和安装正确的驱动程序。 ... [详细]
  • 在使用Eclipse进行调试时,如果遇到未解析的断点(unresolved breakpoint)并显示“未加载符号表,请使用‘file’命令加载目标文件以进行调试”的错误提示,这通常是因为调试器未能正确加载符号表。解决此问题的方法是通过GDB的`file`命令手动加载目标文件,以便调试器能够识别和解析断点。具体操作为在GDB命令行中输入 `(gdb) file `。这一步骤确保了调试环境能够正确访问和解析程序中的符号信息,从而实现有效的调试。 ... [详细]
  • 在 LeetCode 的“有效回文串 II”问题中,给定一个非空字符串 `s`,允许删除最多一个字符。本篇深入解析了如何判断删除一个字符后,字符串是否能成为回文串,并提出了高效的优化算法。通过详细的分析和代码实现,本文提供了多种解决方案,帮助读者更好地理解和应用这一算法。 ... [详细]
  • 系统数据实体验证异常:多个实体验证失败的错误处理与分析
    在使用MVC和EF框架进行数据保存时,遇到了 `System.Data.Entity.Validation.DbEntityValidationException` 错误,表明存在一个或多个实体验证失败的情况。本文详细分析了该错误的成因,并提出了有效的处理方法,包括检查实体属性的约束条件、调试日志的使用以及优化数据验证逻辑,以确保数据的一致性和完整性。 ... [详细]
  • 装饰者模式(Decorator):一种灵活的对象结构设计模式
    装饰者模式(Decorator)是一种灵活的对象结构设计模式,旨在为单个对象动态地添加功能,而无需修改原有类的结构。通过封装对象并提供额外的行为,装饰者模式比传统的继承方式更加灵活和可扩展。例如,可以在运行时为特定对象添加边框或滚动条等特性,而不会影响其他对象。这种模式特别适用于需要在不同情况下动态组合功能的场景。 ... [详细]
  • ZooKeeper 入门指南
    本文将详细介绍ZooKeeper的工作机制、特点、数据结构以及常见的应用场景,包括统一命名服务、统一配置管理、统一集群管理、服务器动态上下线和软负载均衡。 ... [详细]
  • 本文详细介绍了如何利用Duilib界面库开发窗体动画效果,包括基本思路和技术细节。这些方法不仅适用于Duilib,还可以扩展到其他类似的界面开发工具。 ... [详细]
  • 使用Jsoup解析并遍历HTML文档时,该库能够高效地生成一个清晰、规范的解析树,即使源HTML文档存在格式问题。Jsoup具备强大的容错能力,能够处理多种异常情况,如未闭合的标签等,确保解析结果的准确性和完整性。 ... [详细]
  • CentOS 7 中 iptables 过滤表实例与 NAT 表应用详解
    在 CentOS 7 系统中,iptables 的过滤表和 NAT 表具有重要的应用价值。本文通过具体实例详细介绍了如何配置 iptables 的过滤表,包括编写脚本文件 `/usr/local/sbin/iptables.sh`,并使用 `iptables -F` 清空现有规则。此外,还深入探讨了 NAT 表的配置方法,帮助读者更好地理解和应用这些网络防火墙技术。 ... [详细]
  • MySQL的查询执行流程涉及多个关键组件,包括连接器、查询缓存、分析器和优化器。在服务层,连接器负责建立与客户端的连接,查询缓存用于存储和检索常用查询结果,以提高性能。分析器则解析SQL语句,生成语法树,而优化器负责选择最优的查询执行计划。这一流程确保了MySQL能够高效地处理各种复杂的查询请求。 ... [详细]
author-avatar
f永远喜爱捉迷藏
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有